<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8"/>
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../css/font.css"/>
    <link rel="stylesheet" href="../css/xadmin.css"/>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>//
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  /
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">入住管理 </a>
        <a href="">办理入住</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
          <input class="layui-input" placeholder="开始日" name="start" id="start"/>
          <input class="layui-input" placeholder="截止日" name="end" id="end"/>
          <input type="text" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input"/>
          <button class="layui-btn"  lay-submit="" lay-filter="sreach"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <xblock>
        <button class="layui-btn layui-btn-danger" id="addHandle"><i class="layui-icon"></i>办理</button>
        <span class="x-right" style="line-height:40px">共有数据：88 条</span>
      </xblock>
      <table class="layui-table">
        <thead>
        <tr>
          <th>
            <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
          </th>
          <th>ID</th>
          <th>游客姓名</th>
          <th>性别</th>
          <th>身份证号</th>
          <th>联系方式</th>
          <th>房型</th>
          <th>房号</th>
          <th>状态</th>
          <th>开始时间</th>
          <th>结束时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody id="tableBody">
        </tbody>
      </table>
      <div id="demo1"></div>

    </div>
    <script>
      /*<![CDATA[*/
      layui.use(['laydate', 'form', 'jquery', 'laypage', 'layer'], function(){
        var laydate = layui.laydate;
        let $ = layui.jquery;
        let form = layui.form;
        let laypage = layui.laypage;
        let layer = layui.layer;

        let isFirst = true;

        function getHandleList(currentPage, pageCount) {
          $.ajax({
            url: '../handle/list?pageNum=' + currentPage + "&pageSize=" + pageCount,
            success(res){
              let data = res.data;
              if (res.code === 200) {
                let tr = '';
                for (let i = 0;i < data.records.length; i++) {
                  let record = data.records[i];
                  let status = '';
                  if (record.status === 0 || record.status === '0') {
                    status = '未办理';
                  }else {
                    status = '已办理';
                  }
                  tr += '<tr>\n' +
                          '            <td>\n' +
                          '              <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id=\'2\'><i class="layui-icon">&#xe605;</i></div>\n' +
                          '            </td>\n' +
                          '            <td>' + record.mid + '</td>\n' +
                          '            <td>' + record.realName + '</td>\n' +
                          '            <td>' + record.sex + '</td>\n' +
                          '            <td>' + record.identificationNum + '</td>\n' +
                          '            <td>' + record.telephone + '</td>\n' +
                          '            <td>' + record.house.houseName + '</td>\n' +
                          '            <td>' + record.house.houseNum + '</td>\n' +
                          '            <td>' + status + '</td>\n' +
                          '            <td>' + record.startTime + '</td>\n' +
                          '            <td>' + record.endTime + '</td>\n' +
                          '            <td class="td-manage">\n' +
                          '              <a onclick=' + '"account(' + record.mid + ')"' +' title="结账" href="javascript:;">\n' +
                          '                <i class="layui-icon">&#xe631;</i>\n' +
                          '              </a>\n' +
                          '              <a title="续住" onclick="member_del(' + record.mid + ')" href="javascript:;">\n' +
                          '                <i class="layui-icon">&#xe62f;</i>\n' +
                          '              </a>\n' +
                          '            </td>' +
                          '          </tr>';
                }
                $("#tableBody").html(tr);
                //总页数大于页码总数
                if (isFirst) {
                  isFirst = false;
                  //完整功能
                  laypage.render({
                    elem: 'demo1'
                    ,count: data.total
                    ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                    ,jump: function(obj){
                      getHandleList(obj.curr, obj.limit);
                    },
                    limit: 8,
                    limits: [1, 4, 8, 16]
                  });
                }
              }
            }
          }) ;

        }

        getHandleList(1,8);


        $("#addHandle").on('click', function () {

          layer.open({
            type: 1
            ,title: false //不显示标题栏
            ,closeBtn: false
            ,area: '300px;'
            ,shade: 0.8
            ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
            ,btn: ['火速围观', '残忍拒绝']
            ,btnAlign: 'c'
            ,moveType: 1 //拖拽模式，0或者1
            ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br> layer 只是作为 layui 的一个弹层模块，由于其用户基数较大，所以常常会有人以为 layui 是 <del>layerui</del><br><br>layer 虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级 ^_^</div>'
            ,success: function(layero){
              var btn = layero.find('.layui-layer-btn');
              btn.find('.layui-layer-btn0').attr({
                href: 'http://www.layui.com/'
                ,target: '_blank'
              });
            }
          });

        });

        //执行一个laydate实例
        laydate.render({
          elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
          elem: '#end' //指定元素
        });
      });

      /**
       * 客户的报账功能，id是办理表的主键id
       */
      function account(id) {
        $.ajax({
          url: '../handle/account/' + id,
          type: 'POST',
          dataType: 'JSON',
          success(res) {
            if (res.code === 200) {
              alert("结账成功");
            }else {
              alert("结账失败");
            }
          }
        });
      }


      /*续住一天*/
      function member_del(id){
        $.ajax({
          url: '../handle/continue/' + id,
          success(res) {
            if (res.code === 200) {
              alert("续住一天成功");
            }else {
              alert('续住失败');
            }
          }
        })
      }



      function delAll (argument) {

        var data = tableCheck.getData();
  
        layer.confirm('确认要恢复吗？'+data,function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('恢复成功', {icon: 1});
            $(".layui-form-checked").not('.header').parents('tr').remove();
        });
      }
      /*]]>*/
    </script>
    <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>